<template>
  <div class="app-container">
    <div class="controls">
      <p><button id="add" onclick="Add()">Add a rectangle</button></p>
    </div>

    <canvas
      id="c"
      width="800"
      height="600"
      style="border:1px solid #ccc"
    ></canvas>
    <img id="testimg" />
    <div id="testdiv"></div>
  </div>
</template>

<script>
export default {
  name: "designMain",
  components: {},
  data() {
    return {};
  },
  mounted() {
    function parseSVG(s) {
      var div = document.createElementNS("http://www.w3.org/1999/xhtml", "div");
      div.innerHTML = s;
      console.log(div.innerHTML);
      var frag = document.createDocumentFragment();
      while (div.firstChild) frag.appendChild(div.firstChild);

      console.log(frag);
      return frag;
    }

    var canvas = (this.__canvas = new fabric.Canvas("c"));
    // create a rect object
    var deleteIcon =
      "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E";

    var cloneIcon =
      "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 55.699 55.699' width='100px' height='100px' xml:space='preserve'%3E%3Cpath style='fill:%23010002;' d='M51.51,18.001c-0.006-0.085-0.022-0.167-0.05-0.248c-0.012-0.034-0.02-0.067-0.035-0.1 c-0.049-0.106-0.109-0.206-0.194-0.291v-0.001l0,0c0,0-0.001-0.001-0.001-0.002L34.161,0.293c-0.086-0.087-0.188-0.148-0.295-0.197 c-0.027-0.013-0.057-0.02-0.086-0.03c-0.086-0.029-0.174-0.048-0.265-0.053C33.494,0.011,33.475,0,33.453,0H22.177 c-3.678,0-6.669,2.992-6.669,6.67v1.674h-4.663c-3.678,0-6.67,2.992-6.67,6.67V49.03c0,3.678,2.992,6.669,6.67,6.669h22.677 c3.677,0,6.669-2.991,6.669-6.669v-1.675h4.664c3.678,0,6.669-2.991,6.669-6.669V18.069C51.524,18.045,51.512,18.025,51.51,18.001z M34.454,3.414l13.655,13.655h-8.985c-2.575,0-4.67-2.095-4.67-4.67V3.414z M38.191,49.029c0,2.574-2.095,4.669-4.669,4.669H10.845 c-2.575,0-4.67-2.095-4.67-4.669V15.014c0-2.575,2.095-4.67,4.67-4.67h5.663h4.614v10.399c0,3.678,2.991,6.669,6.668,6.669h10.4 v18.942L38.191,49.029L38.191,49.029z M36.777,25.412h-8.986c-2.574,0-4.668-2.094-4.668-4.669v-8.985L36.777,25.412z M44.855,45.355h-4.664V26.412c0-0.023-0.012-0.044-0.014-0.067c-0.006-0.085-0.021-0.167-0.049-0.249 c-0.012-0.033-0.021-0.066-0.036-0.1c-0.048-0.105-0.109-0.205-0.194-0.29l0,0l0,0c0-0.001-0.001-0.002-0.001-0.002L22.829,8.637 c-0.087-0.086-0.188-0.147-0.295-0.196c-0.029-0.013-0.058-0.021-0.088-0.031c-0.086-0.03-0.172-0.048-0.263-0.053 c-0.021-0.002-0.04-0.013-0.062-0.013h-4.614V6.67c0-2.575,2.095-4.67,4.669-4.67h10.277v10.4c0,3.678,2.992,6.67,6.67,6.67h10.399 v21.616C49.524,43.26,47.429,45.355,44.855,45.355z'/%3E%3C/svg%3E%0A";

    let svg = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="MyGrad" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="600" y2="0">
      <stop offset="0" stop-color="#ff0000" />
      <stop offset=".33" stop-color="#00ff00" />
      <stop offset=".67" stop-color="#0000ff" />
      <stop offset="1" stop-color="#000000" />
    </linearGradient>
    <filter id="Identity">
      <feComponentTransfer>
        <feFuncR type="identity" />
	    <feFuncG type="identity" />
        <feFuncB type="identity" />
	    <feFuncA type="identity" />
      </feComponentTransfer>
    </filter>
    <filter id="Table">
	  <feComponentTransfer>
        <feFuncR type="table" tableValues="0 0 1 1" />
	    <feFuncG type="table" tableValues="1 1 0 0" />
        <feFuncB type="table" tableValues="0 1 1 0" />
      </feComponentTransfer>
    </filter>
    <filter id="Linear">
      <feComponentTransfer>
        <feFuncR type="linear" slope=".5" intercept=".25" />
	    <feFuncG type="linear" slope=".5" intercept="0" />
        <feFuncB type="linear" slope=".5" intercept=".5" />
      </feComponentTransfer>
    </filter>
    <filter id="Gamma">
      <feComponentTransfer>
        <feFuncR type="gamma" amplitude="2" exponent="5" offset="0" />
	    <feFuncG type="gamma" amplitude="2" exponent="3" offset="0" />
        <feFuncB type="gamma" amplitude="2" exponent="1" offset="0" />
      </feComponentTransfer>
    </filter>
  </defs>
  <g font-size="50" font-weight="bold" fill="url(#MyGrad)">
    <text x="50" y="60" filter="url(#Identity)">Identity</text>
    <text x="50" y="120" filter="url(#Table)">TableLookup</text>
    <text x="50" y="180" filter="url(#Linear)">LinearFunc</text>
    <text x="50" y="240" filter="url(#Gamma)">GammaFunc</text>
  </g>
</svg>`;

    svg = `<svg width="1778.286639120849" height="952.9939116403262" 
								viewBox="0 0 933 500"
								preserveAspectRatio="none"
								xmlns="http://www.w3.org/2000/svg" 
								version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
                                    <g id="SvgjsG1129"><filter id="filter_1601898788311">
                                    <!-- 亮度 -->                
                                    <feComponentTransfer color-interpolation-filters="sRGB">                    
                                <feFuncR type="linear" slope="1" intercept="-0.06"></feFuncR> 
                    <feFuncG type="linear" slope="1" intercept="-0.06"></feFuncG> 
                    <feFuncB type="linear" slope="1" intercept="-0.06"></feFuncB>
                </feComponentTransfer> <!-- 对比度 -->
                <feComponentTransfer color-interpolation-filters="sRGB">
                    <feFuncR type="linear" slope="1.2" intercept="-0.1"></feFuncR> 
                    <feFuncG type="linear" slope="1.2" intercept="-0.1"></feFuncG> 
                    <feFuncB type="linear" slope="1.2" intercept="-0.1"></feFuncB>
                </feComponentTransfer>  <!-- 饱和度 -->
                <feColorMatrix color-interpolation-filters="sRGB" type="matrix" values="
                1.6914 -0.6094 -0.082 0 0 
                -0.3086 1.3906 -0.082 0 0 
                -0.3086 -0.6094 1.918 0 0 
                0 0 0 1 0"></feColorMatrix> 
                <!-- 色相 -->
                <feColorMatrix type="hueRotate" values="-73.8"></feColorMatrix>
                <feGaussianBlur stdDeviation="0.2" }=""></feGaussianBlur></filter><image id="SvgjsImage1130" xlink:href="/baojiahjg/dz_dahaoma.jpg" width="933" height="500" filter="url(#filter_1601898788311)"></image></g>
								</svg>`;

    var testdiv = document.getElementById("testdiv");
    testdiv.innerHTML = svg;

    var deleteImg = document.getElementById("testimg");
    deleteImg.src = "data:image/svg+xml," + unescape(encodeURIComponent(svg));
    //  "file://E:\\down\\vue-card-diy-master(1)\\TongYinDesign\\src\\assets\\svg\\2.svg";
    // "https://img.yinqibang.com/materials/201908/37bf0c2197c94236b045c1be15c4438d.svg"; //
    //pic2;

    // fabric.loadSVGFromString(svg, (objects, options) => {
    //   const obj = fabric.util.groupSVGElements(objects, options);
    //   obj.set({
    //     left: 100,
    //     top: 50,
    //     width: 300,
    //     height: 300
    //   });
    //   console.log(obj);
    //   canvas.add(obj).renderAll();
    // });

    //img.src = 'data:image/svg+xml,' + unescape(encodeURIComponent(svg));

    console.log(deleteImg.src);
    var imgInstance = new fabric.Image(deleteImg, {
      left: 100,
      top: 100,
      width: 100,
      height: 100
    });
    canvas.add(imgInstance).renderAll();

    var cloneImg = document.createElement("img");
    cloneImg.src = cloneIcon;

    fabric.Object.prototype.transparentCorners = false;
    fabric.Object.prototype.cornerColor = "blue";
    fabric.Object.prototype.cornerStyle = "circle";

    function Add() {
      var rect = new fabric.Textbox("的方式多福多寿", {
        left: 100,
        top: 50,
        fill: "yellow",
        width: 200,
        height: 100,
        objectCaching: false,
        stroke: "lightgreen",
        strokeWidth: 4
      });

      canvas.add(rect);
      canvas.setActiveObject(rect);
    }

    function renderIcon(icon) {
      return function renderIcon(ctx, left, top, styleOverride, fabricObject) {
        var size = this.cornerSize;
        ctx.save();
        ctx.translate(left, top);
        ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));

        // ctx.fillStyle = "white";
        // ctx.arc(0, 0, size / 2 + 2, 0, 2 * Math.PI);
        // ctx.fill();
        ctx.drawImage(icon, -size / 2, -size / 2, size, size);
        ctx.restore();
      };
    }

    // fabric.Object.prototype.controls.mtr.render = renderIcon(deleteImg);
    // fabric.Object.prototype.controls.mtr.cornerSize = 14;
    // fabric.Object.prototype.controls.mtr.withConnection = false;

    // //fabric.Object.prototype.controls.mtr.visible = false;

    // fabric.Object.prototype.controls.mtr.offsetY = 20;
    // fabric.Object.prototype.controls.mtr.x = 0;
    // fabric.Object.prototype.controls.mtr.y = 0.5;
    // fabric.Object.prototype.controls.mtr.withConnection = false;
    // console.log(fabric.Object.prototype.controls.mtr);

    //https://www.chuangkit.com/designdist/rotate.svg?b4b96237716b02445af3fe3be560bf52

    // fabric.Object.prototype.controls.deleteControl = new fabric.Control({
    //   x: 0,
    //   y: 0.5,
    //   offsetY: 20,
    //   //offsetX: 16,
    //   cursorStyle: "pointer",
    //   actionHandler: fabric.Object.prototype.controls.mtr.actionHandler,
    //   render: renderIcon(deleteImg),
    //   cornerSize: 14,
    //   actionName: "rotate"
    // });

    // fabric.Object.prototype.controls.AAAControl = new fabric.Control({
    //   x: 0.5,
    //   y: -0.5,
    //   offsetY: -16,
    //   offsetX: 16,
    //   cursorStyle: "pointer",
    //   mouseUpHandler: deleteObject,
    //   render: renderIcon(deleteImg),
    //   cornerSize: 24
    // });

    // fabric.Object.prototype.controls.clone = new fabric.Control({
    //   x: -0.5,
    //   y: -0.5,
    //   offsetY: -16,
    //   offsetX: -16,
    //   cursorStyle: "pointer",
    //   mouseUpHandler: cloneObject,
    //   render: renderIcon(cloneImg),
    //   cornerSize: 24
    // });

    //Add();

    function deleteObject(eventData, target) {
      var canvas = target.canvas;
      canvas.remove(target);
      canvas.requestRenderAll();
    }

    function cloneObject(eventData, target) {
      var canvas = target.canvas;
      target.clone(function(cloned) {
        cloned.left += 10;
        cloned.top += 10;
        canvas.add(cloned);
      });
    }
  }
};
</script>

<style lang="less" scoped>
.controls {
  display: inline-block;
}
</style>
